<!--
 * @Author: zhangyun
 * @Date: 2021-04-23 14:23:12
 * @LastEditors: zhangyun
 * @LastEditTime: 2021-04-28 10:32:53
 * @Desc: 
-->
<template>
  <div class="menus p-3">
    <div v-for="item of menus" :key="item.code">
      <!-- 一级菜单 -->
      <div
        class="menu-content flex h-12 hover:bg-gray-100 rounded active:bg-blue-100 focus:text-blue-500"
        :class="[currentRoute === item.link && 'bg-blue-100']"
        @click="openChildMenu(item)"
      >
        <div class="left flex-1 cursor-pointer flex items-center pl-2">
          <i
            class="iconfont text-gray-600 text-xs"
            :class="[item.icon, currentRoute === item.link && 'text-blue-600']"
          ></i>
          <strong class="menu-name text-gray-600 ml-2" :class="[currentRoute === item.link && 'text-blue-600']">{{
            item.name
          }}</strong>
        </div>
        <div class="right w-12 flex items-center" v-show="item?.children?.length">
          <i class="iconfont" :class="[isShowChildMenu ? 'icon-shangsanjiaoxing' : 'icon-xiasanjiaoxing']"></i>
        </div>
      </div>
      <!-- 二级菜单 -->
      <transition name="slide-fade">
        <div class="menu_child relative top-0" v-if="isShowChildMenu">
          <strong
            class="block menu_child-name text-sm text-gray-600 pl-8 py-2 cursor-pointer rounded w-full hover:bg-gray-100"
            :class="[currentRoute === child.link && 'bg-blue-100 text-blue-600']"
            v-for="child of item.children"
            :key="child.code"
            @click="openChildMenu(child)"
            >{{ child.name }}</strong
          >
        </div>
      </transition>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, watch, PropType } from 'vue'
import { useRouter } from 'vue-router'

export default defineComponent({
  name: 'Menus',
  setup() {
    const isShowChildMenu = ref(false)
    const router = useRouter()
    const currentRoute = ref<any>('creator')
    const menus = ref<Array<any>>([
      {
        icon: 'icon-home',
        name: '主页',
        code: 'creator',
        link: 'creator',
      },
      {
        icon: 'icon-chuangzuo',
        name: '创作',
        children: [
          {
            name: '问题推荐',
            code: 'featuredQuestion',
            link: 'featuredQuestion',
          },
          {
            name: '写文章',
            code: 'writeArticle',
            link: 'writeArticle',
          },
          {
            name: '上传视频',
            code: 'pushVideo',
            link: 'pushVideo',
          },
        ],
      },
      {
        icon: 'icon-ziyuan143',
        name: '管理',
        children: [],
      },
      {
        icon: 'icon-shujufenxi',
        name: '数据分析',
        children: [],
      },
      {
        icon: 'icon-tubiaozhizuomoban',
        name: '成长',
        children: [],
      },
    ])
    watch(
      () => router.currentRoute,
      (route) => {
        currentRoute.value = route.value.name
      },
      { deep: true }
    )

    function openChildMenu(item: any) {
      if (item?.children?.length > 0) {
        isShowChildMenu.value = !isShowChildMenu.value
      } else {
        router.push({ name: item.link })
      }
    }

    return {
      isShowChildMenu,
      openChildMenu,
      currentRoute,
      menus,
    }
  },
})
</script>

<style lang="scss" scoped>
.slide-fade-enter-active {
  transition: all 0.5s ease;
}

.slide-fade-enter-from {
  transition: all 0.5s ease;
  transform: translateY(-8px);
}
.slide-fade-leave-to {
  transition: all 0s ease;
}
</style>
